<!--
  @dauthor : cpucode
  @date : 2021/2/20
  @time : 9:37
  @github : https://github.com/CPU-Code
  @csdn : https://blog.csdn.net/qq_44226094
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue数据</title>
    <script src="../../../../../../node_modules/vue/dist/vue.js"></script>

    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            color: white;
        }

        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="color='red'">红</button>
        <button @click="color='blue'">蓝</button>

        <div v-bind:class="color">
            点击按钮改变背景颜色
        </div>

        <hr>
        <button @click="bool = !bool">点我改变下面色块颜色</button>

        <div :class="{red:bool,blue:!bool}">
            点击按钮改变背景颜色
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                color:"red",
                bool:true
            }
        });
    </script>
</body>
</html>